<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>最简单的tab选项卡</title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
		.nav{
			width: 408px;
			height: 50px;

		}
		.nav li{
			width: 100px;
			height: 50px;
			border:1px solid blue;
			list-style:none;
			float:left;
			text-align:center;
			line-height:50px;
			font-size:20px;
		}
		.nav .active{
			background: yellow;
		}
		#wrap div{
			width: 408px;
			height: 400px;
			border:1px solid red;
			display:none;
			font-size:30px;
			text-align:center;
			line-height:400px;
		}
		#wrap .box{
			display:block;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li class="active">百度</li>
		<li>腾讯</li>
		<li>阿里</li>
		<li>qq</li>
	</ul>
	<div id="wrap">
		<div class="box">百度</div>
		<div>腾讯</div>
		<div>阿里</div>
		<div>qq</div>
	</div>
	<script>
	// window.onload=function(){
	// 	var nav=document.querySelector(".nav")
	// var lis=nav.getElementsByTagName('li')
	// var wrap=document.getElementById('wrap')
	// var divs=wrap.getElementsByTagName("div")
	// for(var n=0;n<lis.length;n++){
	// 	lis[n].index=n;
	// 	lis[n].onclick=function(){
	// 		for(var j=0;j<lis.length;j++){
	// 			lis[j].className=""
	// 		}
	// 		this.className="active";
	// 		for(var x=0;x<divs.length;x++){
	// 			divs[x].className=""
	// 		}
	// 		divs[this.index].className="box"
	// 	}
	// }
	// }
	</script>
	<script>
		$(function(){
			$(".nav li").click(function(){
				var index=$(this).index()
				$(".nav li").removeClass("active")
				$(this).addClass("active")
				$("#wrap div").removeClass("box")
				$("#wrap div").eq(index).addClass("box")
			})
			
			
		 })
	</script>
</body>
</html>